<template>
  <div class="title" :style="[styleObject]">
    <div class="flex-1 flex-column" :style="{alignItems:props.configOption.position==1?'flex-start':'center'}">
      <div class="title_size line-1" :style="{fontSize:props.configOption.titleSize + 'px'}">{{props.configOption.title}}</div>
      <div class="desc line-2">{{props.configOption.describe}}</div>
    </div>
    <div v-if="props.configOption.more" class="more">{{props.configOption.moreText}}</div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted} from 'vue'
const props = defineProps({
  configOption: {
    type: Object,
    default:()=>{},
  }
});
let styleObject = reactive({
  backgroundColor:props.configOption.bgColor || '#fff',
  color:props.configOption.textColor || '#000',
  'backgroundImage':props.configOption.bgImg,
})

</script>
<style scoped>
.title {
  display: flex;
  justify-content: flex-start;
  background: #cccfff;
  padding: 10px 10px;
  box-sizing: border-box;
  font-size: 14px;
}
.title_size{
  font-size: 14px;
}
.desc{
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
}
.more{
  display: flex;
  flex-shrink: 0;
  font-size: 12px;
  color: #aaa;
}
</style>
